Click to show panel
This panel contains a div element, which is hidden by default (display: none).
We use JavaScript to show it (display: block).
How it works: When the user clicks on the p element, a function called myFunction() is executed, which changes the style of the div with id="panel" from display:none (hidden) to display:block (visible).
You will learn more about JavaScript in our JavaScript Tutorial.
Click to show/hide panel
The panel toggles between hiding and showing a div element.
W use JavaScript to open and close it.
You will learn more about JavaScript in our JavaScript Tutorial.
visibility:hidden hides the element, but it still takes up space in the layout.
display:none removes the element from the document. It does not take up any space.
Notice that the h1 element with display: none; does not take up any space.
Notice that the hidden heading still takes up space.